<template>
	<view class="content">
		<!-- <view class="bg-blur"></view> -->
		<!--  :style="{backgroundImage:'url('+ giftData.toInfo.avatar + ')'}" -->
		<!-- <view v-if="showAddFriend" class="addFriend">
			<text class="tips">加好友对方优先看到你</text>
			<button type="primary" size="mini" @click="addFriend('application')">加好友 | {{joinfriend}}米币</button>
		</view> -->
		<!-- 对方资料面板 -->
		<view class="user-wrap" v-if="isGiftShow">
			<view class="user-info">
				<image class="avatar-icon" :src="user.avatar" mode=""></image>
				<view :class="['sex-wrap', 'sex' + user.sex]">
					<image class="sex-icon" :src="'/static/img/sex' + user.sex + '.png'" mode=""></image>
					<text class="age">{{user.age}}</text>
				</view>
				<view v-if="user.city" class="city-wrap">
					<image class="city-icon" src="/static/img/location1.png" mode=""></image>
					<text class="city">{{user.city !=""?user.city:''}}</text>
				</view>
                <view class="think-wap">{{user.think}}</view>
				<view class="see-wap" @click="personal">查看全部</view>
			</view>
		</view>
		
		<view class="message-wrap" :style="{height: (style.contentViewHeight-40)+'px', marginBottom: style.contentViewMarginBottom}" @touchstart="hideMore">
			<scroll-view class="msg-list" :style="{height: (style.contentViewHeight-40)+'px',paddingTop: isGiftShow?'220rpx':'20rpx'}" :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="0">
				<!-- 加载历史数据waitingUI -->
				<view v-show="isHistoryLoading" class="loading">
					<view class="spinner">
						<view class="rect rect1"></view>
						<view class="rect rect2"></view>
						<view class="rect rect3"></view>
						<view class="rect rect4"></view>
						<view class="rect rect5"></view>
					</view>
				</view>
				<view class="row" v-for="(row, index) in msgList" :key="index" :id="'msg' + index">
					<!-- 系统消息 -->
					<block v-if="row.type == 'system'">
						<view class="system">
							<view v-if="row.msg.type == 'text'" class="system-content text">
								{{row.msg.content.text}}
							</view>
						</view>
					</block>
					<!-- 用户消息 -->
					<block v-if="row.type == 'user'">
						<view class="my" v-if="row.msg.userinfo.id == uid">
							<view class="left">
								<view v-if="row.msg.type == 'text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<view v-if="row.msg.type == 'voice'" class="bubble voice" @click="playVoice(row.msg, index)" :class="playMsgid == 'msg' + index ? 'play' : ''">
									<view class="length">{{row.msg.content.length}}</view>
									<view class="icon my-voice"></view>
								</view>
								<view v-if="row.msg.type == 'img'" class="bubble img" @click="showPic(row.msg)">
									<image :src="row.msg.content.url" mode="aspectFill"></image>
								</view>
								<view v-if="row.msg.type == 'gift'" class="bubble gift">
									<view class="imgbg" style="background-image: url('/static/img/home/box-r.png');padding-left: 64rpx;">
										<image :src="row.msg.content.url" mode=""></image>
									</view>
									<view class="giftinfo">
										<view class="giftmsg">送出礼物</view>
										<view class="giftname">{{row.msg.content.giftName}}</view>
									</view>
								</view>
							</view>
							<!-- v-if="row.msg.type != 'gift'" -->
							<view class="right" :style="row.msg.type == 'gift'?'margin-top:80rpx':''">
								<image :src="row.msg.userinfo.avatar" mode="aspectFill"></image>
							</view>
						</view>
						<view class="other" v-if="row.msg.userinfo.id == toInfo.id" >
							<view class="left" @click="row.type != 'system'?personal:''" :style="row.msg.type == 'gift'?'margin-top:80rpx':''">
								<image :src="row.msg.userinfo.avatar" mode="aspectFill"></image>
							</view>
							<view class="right" >
								<view v-if="row.msg.type == 'text'" class="bubble">
									<rich-text :nodes="row.msg.content.text"></rich-text>
								</view>
								<view v-if="row.msg.type == 'voice'" class="bubble voice" @click="playVoice(row.msg, index)" :class="playMsgid == 'msg' + index ? 'play' :''">
									<view class="icon other-voice"></view>
									<view class="length">{{row.msg.content.length}}</view>
								</view>
								<view v-if="row.msg.type == 'img'" class="bubble img" @click="showPic(row.msg)">
									<image :src="row.msg.content.url" mode="aspectFill"></image>
								</view>
								<view v-if="row.msg.type == 'gift'" class="bubble gift" >
									<!-- <text>送你一个{{row.msg.content.giftName}}</text>
									<image :src="row.msg.content.url" mode=""></image> -->
									
									<view class="giftinfo" >
										<view class="giftmsg" style="text-align: right;">送出礼物</view>
										<view class="giftname" style="text-align: right;">{{row.msg.content.giftName}}</view>
									</view>
									<view class="imgbg" style="background-image: url('/static/img/home/box-l.png');float: left;padding-left: 80rpx;">
										<image :src="row.msg.content.url" mode=""></image>
									</view>							
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>

        <!-- 送礼物 -->
        <!-- <view class="sendgif" @click="openGift" v-if="isGiftShow">
			<image src="/static/img/gift_icon1.png"></image>
		</view> -->
		
		<!-- :style="{bottom: isMore ? '390rpx' : '0rpx'}" -->
		<view v-if="isNotAdmin" class="input-box"  >
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="icon" :class="isVoice ? 'jianpan' : 'yuyin'" @click="switchVoice"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice ? '' : 'hidden', recording ? 'recording' : '']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice ? 'hidden' : ''">
					<input class="input" v-model="textMsg" confirm-type="send" @focus="isMore = false" @confirm="sendText" :placeholder="iskefu?'':game" />
				</view>
			</view>
			<!-- <view v-if="textMsg == '' || isVoice" class="more" @click="showMore">
				<view class="icon add"></view>
			</view> -->
			<!-- <view v-if="!isVoice && textMsg != ''" class="send" disab> -->
			
			
			<view v-if="!isVoice  " class="send" >
				<button type="primary" size="mini" @click="sendText">发送</button>
			</view>
		</view>
		
		<!-- 更多功能 相册-拍照-礼物 -->
		<view  class="popup-layer" v-if="isNotAdmin">
			<view class="more-layer">
				<view class="box" @click="getImage('album')">
					<view class="menu-item">
						<view class="icon tupian2"></view>
					</view>
				</view>
				<view class="box" @click="getImage('camera')">
					<view class="menu-item">
						<view class="icon paizhao"></view>
					</view>
				</view>
				<view class="box" @click="openGift"  v-if="!ish">
					<view class="menu-item">
						<view class="icon1 gift"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 播放送礼物音效 -->
		
		<!-- 录音UI效果 -->
		<view class="record" :class="recording ? '' : 'hidden'">
			<view class="ing" :class="willStop ? 'hidden' : ''">
				<view class="icon luyin2" ></view>
			</view>
			<view class="cancel" :class="willStop? '' : 'hidden'">
				<view class="icon chehui" ></view>
			</view>
			<view class="tis" :class="willStop ? 'change' : ''">{{recordTis}}</view>
		</view>
		<give-gift-popup ref="give-gift" :giftData="giftData" @change="giveGiftChange"  :domain="domain"></give-gift-popup>
		<gift-popup ref="gift" @change="giftChange"></gift-popup>
	</view>
</template>
<script>
	import util from "@/common/util.js"
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	export default {
		data() {
			return {
				style: {
					windowHeight: 0,
					contentViewHeight: 0,
					contentViewMarginBottom: '100rpx'
				},
				uid: '',
				userInfo: {},
				toInfo: {},
				relation: '',
				showAddFriend: false,
				joinfriend: '',
				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: true,
				scrollTop: 0,
				scrollToView: '',
				msgList: [],
				msgImgList: [],
				maxCnt: 15, // 一次拉取历史消息数量
				nextReqMessageID: '',
				isCompleted: 0,
				game: '', // 消耗的米币
				qiniuToken: '',
				domain: '',
				progress: 0,
				//录音相关参数
				// #ifndef H5
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {identifier:0,Y:0},
				recordTimer: null,
				recordLength: 0,
				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				ish:false,  //是否隐藏
				// more参数
				isMore: false,
				isNotAdmin: true,
				giftData: {
					toInfo: {
						id: '',
						name: '',
						avatar: '',
					},
					userInfo: {
						id: '',
						name: '',
						avatar: '',
						rose: 0
					},
					list: []
				},
			    // 是否显示送礼物
				isGiftShow:false,
				
				// 和自己聊天的对方用户信息
				user:{
					avatar:'',
					sex:'',
					age:'',
					city:'',
					think:''
				},
				iskefu:false,  //是否是官方客服
				
				mgArr:[],
				isSensitive:false,
			};
		},
		onLoad(options) {
			this.mgArr = uni.getStorageSync('sensitive');
			
			this.isGiftShow = (options.type==1?false:true);
			if(options.type==3){
				this.iskefu=true;
			}
			try {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo) {
					this.style.windowHeight = systemInfo.windowHeight
					this.style.contentViewHeight = systemInfo.windowHeight - systemInfo.screenWidth / 750 * (100);
				}
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.userInfo = myInfo;
					this.uid = this.IDBEFORE + this.userInfo.id
					this.giftData.userInfo.id = this.userInfo.id
					this.giftData.userInfo.name = this.userInfo.name
					this.giftData.userInfo.avatar = this.userInfo.avatar
				}
			} catch (e) {
				console.warn(e)
			}
			this.consume();
			
			
			//语音自然播放结束
			this.AUDIO.onEnded((res)=>{
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e)=>{
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e)=>{
				this.recordEnd(e);
			})
			// #endif
			this.toInfo = JSON.parse(decodeURIComponent(options.to));
			this.giftData.toInfo.id = util.getUserID(this.toInfo.id, this.IDBEFORE)
			this.giftData.toInfo.name = this.toInfo.name
			this.giftData.toInfo.avatar = this.toInfo.avatar
			this.getid();
			let avatar = this.giftData.toInfo.avatar.split('/')
			if(avatar.indexOf('static') != -1){
				this.giftData.toInfo.avatar = '';
			}
			this.isFriendCheck();
			uni.setNavigationBarTitle({
				title: this.toInfo.name
			})
			if (this.toInfo.id == 'admin') {
				this.isNotAdmin = false
				this.style.contentViewHeight = this.style.windowHeight
				this.style.contentViewMarginBottom = '0rpx'
			}
			uni.$on('im-page', data => {
				// console.log('im-page监听', data)
				if (data.type == 'message') {
					if (data.data.from != this.toInfo.id) {
						return false;
					}
					this.$tim.setMessageRead({
						conversationID: this.toInfo.conversationID,
					});
					if (data.data.type == 'TIMTextElem') {
						this.screenMsg({
							type: 'user',
							msg: {
								type: 'text',
								content: {
									text: data.data.payload.text
								},
								userinfo: {
									id: this.toInfo.id,
									name: this.toInfo.name,
									avatar: this.toInfo.avatar
								}
							}
						})
					}
					if (data.data.type == 'TIMCustomElem') {
						this.screenMsg({
							type: 'user',
							msg: {
								type: data.data.payload.data,
								content: JSON.parse(data.data.payload.extension),
								userinfo: {
									id: this.toInfo.id,
									name: this.toInfo.name,
									avatar: this.toInfo.avatar
								}
							}
						})
					}
				}
				if (data.type == 'send') {
					// this.$refs['give-gift'].close();
					
					this.isMore = false;
					this.screenMsg({
						type: 'user',
						msg: {
							type: data.data.type,
							content: data.data.msg,
							userinfo: {
								id: this.IDBEFORE + this.userInfo.id,
								name: this.userInfo.name,
								avatar: this.userInfo.avatar
							}
						},
					});
					if (!!data.data.msg.svga) {
						let svga = plus.webview.create('/hybrid/html/local.html', 'svga', {
							background: 'transparent'
						}, {
							url: data.data.msg.svga
						});
						svga.show();
					}
				}
			})	
		},
		onReady() {
			this.getMsgList();
			this.getQiniuToken();
			
			this.getUserDetail();
		},
		onShow(){
			this.scrollTop = 9999999;
		},
		onUnload() {
			
			uni.$off('im-page')
		},
		onBackPress(e) {
			uni.$emit('message-page', {
				type: 'update'
			});
		},
		onNavigationBarButtonTap(e) {
			uni.showActionSheet({
				// itemList: ['查看详情', '举报'],
				itemList: ['举报'],
				success: res => {
					
					// if (res.tapIndex == 1) {
						uni.navigateTo({
							url: '../my/complaints?touid=' + util.getUserID(this.toInfo.id, this.IDBEFORE)
						})
					// }
				}
			});
		},
		methods:{
			// 跳转个人资料
			personal(){
				let user = {
					id: util.getUserID(this.toInfo.id, this.IDBEFORE),
					name: this.toInfo.name,
					avatar:this.toInfo.avatar
				}
				uni.navigateTo({
					url: '../home/user_home?user=' + JSON.stringify(user)
				})
			},
			isFriendCheck: function () {
				this.$api.api.ajaxData({
					method: 'V1.FriendCheck',
					uid: this.userInfo.id,
					token: this.userInfo.token,
					touid: util.getUserID(this.toInfo.id, this.IDBEFORE)
				}, res => {
					if (res.status) {
						this.joinfriend = res.extra.joinfriend;
						if (res.data[0].ActionStatus != 'FAIL') {
							this.relation = res.data[0].InfoItem[0].Relation
						}
						if (this.relation == 'CheckResult_Type_AWithB' || this.relation == 'CheckResult_Type_BothWay') {
							// this.showAddFriend = false;
						} else if (this.toInfo.conversationID.indexOf('C2C') != -1 && this.toInfo.id != 'admin') {
							// this.showAddFriend = true
						}
					}
				})
			},
			
			giveGiftChange: function (e) {
				
				this.JGpush(e);
			},
			
			giftChange: function (e) {
				console.log(e)
			},
			
			getQiniuToken: function () {
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.userInfo.id,
					token: this.userInfo.token,
				}, res => {
					if (res.status) {
						this.qiniuToken = res.data.token
						this.domain = res.data.domain
						// console.log('七牛云域名',this.domain)
					}
				})
			},
			
			// 获取最近消息
			getMsgList: function () {
				this.$tim.getMessageList({
					conversationID: this.toInfo.conversationID,
					nextReqMessageID: this.nextReqMessageID,
					count: 15,
				}).then(imResponse => {
					const messageList = imResponse.data.messageList;
					let tempList = [];
					for (let i = 0; i < messageList.length; i++) {
						let content = {};
						let userinfo = {};
						if (messageList[i].flow == 'in') {
							userinfo.id = this.toInfo.id + '';
							userinfo.name = this.toInfo.name;
							userinfo.avatar = this.toInfo.avatar;
						}
						if (messageList[i].flow == 'out') {
							userinfo.id = this.IDBEFORE + this.userInfo.id + '';
							userinfo.name = this.userInfo.name;
							userinfo.avatar = this.userInfo.avatar;
						}
						if (messageList[i].type == 'TIMTextElem') {
							content = messageList[i].payload
							tempList.push({
								type: 'user',
								msg: {
									type: 'text',
									content: content,
									userinfo: userinfo
								}
							})
						}
						if (messageList[i].type == 'TIMCustomElem') {
							if (messageList[i].payload.data == 'img' || messageList[i].payload.data == 'voice' || messageList[i].payload.data == 'gift') {
								content = JSON.parse(messageList[i].payload.extension)
								tempList.push({
									type: 'user',
									msg: {
										type: messageList[i].payload.data,
										content: content,
										userinfo: userinfo
									}
								})
								if (messageList[i].payload.data == 'img') {
									this.msgImgList.push(content.url);
								}
							}
						}
					}
					if (this.nextReqMessageID == '') {
						this.msgList = tempList;
					} else {
						for (let j = (tempList.length-1); j >= 0; j--) {
							this.msgList.unshift(tempList[j])
							if (tempList[j].msg.type == 'img') {
								this.msgImgList.unshift(tempList[j].msg.content.url);
							}
						}
					}
					if (this.nextReqMessageID != '' && tempList.length == 0) {
						uni.showToast({
							title: '没有更多历史消息了~',
							position: 'bottom',
							icon: 'none'
						});
					}
					this.nextReqMessageID = imResponse.data.nextReqMessageID;
					this.isCompleted = imResponse.data.isCompleted;
					// 滚动到底部
					this.$nextTick(function() {
						if (!this.isHistoryLoading) {
							this.scrollToView = 'msg' + (this.msgList.length - 1)
						}
						this.$nextTick(function() {
							this.isHistoryLoading = false;
						});
					});
					this.$tim.setMessageRead({ // 将会话下所有未读消息已读上报
						conversationID: this.toInfo.conversationID,
					});
				});
			},
			
			// 触发滑动到顶部(加载历史信息记录)
			loadHistory: function (e) {
				if (this.isHistoryLoading) {
					return ;
				}
				this.isHistoryLoading = true; // 参数作为进入请求标识，防止重复请求
				setTimeout(() => {
					this.getMsgList();
				}, 1000)
			},
			
			// 处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize: function (content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350); // 350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); // 350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w/content.h;
					content.w = scale > 1 ? maxW : maxH*scale;
					content.h = scale > 1 ? maxW/scale : maxH;
				}
				return content;
			},
			
			// 接受消息(筛选处理)
			screenMsg: function (msg) {
				if (msg.type == 'system') { //系统消息
					switch (msg.msg.type) {
						case 'text':
							this.msgList.push(msg);
							break;
					}
				}else if (msg.type == 'user') { // 用户消息
					switch (msg.msg.type) {
						case 'text':
							this.msgList.push(msg);
							break;
						case 'voice':
							this.msgList.push(msg);
							break;
						case 'img':
							this.msgImgList.push(msg.msg.content.url);
							this.msgList.push(msg);
							break;
						case 'gift':
							this.msgList.push(msg);
							break;
					}
					if (msg.msg.userinfo.id != this.IDBEFORE + this.userInfo.id) { // 非自己的消息震动
						uni.vibrateLong();
					}
				}
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.msgList.length - 1)
				});
			},
			
			showMore: function () {
				this.isVoice = false;
				this.isMore = true;
			},
			
			hideMore: function () {
				this.isVoice = false;
				this.isMore = false;
				
			},
			
			getImage: function (type) {
				this.hideMore();
				uni.chooseImage({
					sourceType: [type],
					sizeType: ['original', 'compressed'],
					success: (res)=>{
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image)=>{
									let msg = {
										url: res.tempFilePaths[i],
										w: image.width,
										h: image.height,
									};
									this.sendMsg(msg, 'img');
								}
							});
						}
					}
				});
			},
			// 发送消息推送
			JGpush(content){
				if(typeof(content) == 'object'){
					return;
				}
				this.$api.api.ajaxData({
					method: 'V1.Jpush',
					app_id: 'EMqh2oxKpkqioula',
					sign: 'q',
					nonce: '2412',
					alias: 'user_' + this.giftData.toInfo.toid,
					content
				}, res => {
					
				})
			},
			// 查询对方ID
			getid(){
				this.$api.api.ajaxData({
					method: 'V1.Detail',
					uid: this.userInfo.id,
					token: this.userInfo.token,
					touid: this.giftData.toInfo.id,
					page: '1',
				}, res => {
					if (res.status) {
						this.giftData.toInfo.toid = res.data.info.lid;
					}
				})
			},
			// 查询发送一条消息消耗米币
			consume(){
				const hiddenInfo = uni.getStorageSync('isHidden');
				if(hiddenInfo.isHidden=="1"){
					this.ish=true;
					return;
				}
				this.$api.api.ajaxData({
					method: 'V1.GetConfig',
					config: 'love.give.chat.rose.num'
				}, res => {
					if(res.status){
						if(this.userInfo.sex == '1' && !!this.userInfo.vip == false){
							this.game = '非vip发送一条消息消耗' + res.data + '米币';
						}

					}
				})
			},
			// 能否发送消息(付费)
			route(){
				this.$api.api.ajaxData({
					method: 'V1.CanSend',
					uid: this.userInfo.id,
				}, res => {
					if(res.status){
					this.sendMsg({
						text: this.textMsg,
						}, 'text');
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			// 发送文字消息
		 	sendText: function () {
				this.hideMore();
				if (!this.textMsg) {
					return;
				}
				// 判断是否有敏感词
				this.isSensitive = this.filtion(this.mgArr,this.textMsg)
				
				
				
				
				// 男号并且没vip需付费
				if(this.userInfo.sex == '1' && !!this.userInfo.vip == false){
					
					if(!this.iskefu){
						this.route();
					}else{
						this.sendMsg({
							text: this.textMsg,
						}, 'text');
					}
				} else {
					this.sendMsg({
						text: this.textMsg,
					}, 'text');
				}
			},
			
			// 敏感词匹配事件
			filtion(arr, value) {
			    let re = '';
				let isming=false;
			    for (let i = 0; i < arr.length; i++) {
			        if (i==arr.length-1) {
			            re+=arr[i];
			        }else{
			            re+=arr[i]+"|";
			        }
			       
			        //利用RegExp可以动态生成正则表示式
			        let r = new RegExp(arr[i], "ig");
			        if(r.test(value)){
						
						//这里是有敏感词的情况下，已经标红，并且提示为false
						isming=true;
						return isming;
			        } 
			    }
			},
			
			// 发送消息
			sendMsg: function (content, type) {
				if(this.isSensitive){
					uni.showToast({
						title: '信息内含有违规内容，请规范你的内容',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				
				if (type == 'text') {
					let message = this.$tim.createTextMessage({
						to: this.toInfo.id + '',
						conversationType: 'C2C',
						payload: {
							text: content.text
						}
					});
					
					this.$tim.sendMessage(message).then(imResponse => {
						
						let content = imResponse.data.message._elements[0].content.text;
						this.JGpush(content);
						this.textMsg = '';
					}).catch(imError => {
						console.warn('发送文本消息失败', imError);
					});
				}
				if (type == 'img' || type == 'voice') {
					let custom_data = type;
					let custom_desc = '';
					let custom_ext = '';
					let temp_ext = {};
					if (custom_data == 'img') {
						custom_desc = '图片'
						temp_ext.w = content.w
						temp_ext.h = content.h
					}
					if (custom_data == 'voice') {
						custom_desc = '语音'
						temp_ext.length = content.length
					}
					let key = 'time_' + (+new Date()) + '-random_' + this.$api.api.getRandom(0, 1000000);
					uni.showLoading({
						title: this.progress + '%'
					});
					qiniuUploader.upload(content.url, qiniu => {
						uni.hideLoading();
						temp_ext.url = qiniu.fileUrl;
						custom_ext = JSON.stringify(temp_ext)
						let message = this.$tim.createCustomMessage({
							to: this.toInfo.id + '',
							conversationType: this.TIM.TYPES.CONV_C2C,
							payload: {
								data: custom_data,
								description: custom_desc,
								extension: custom_ext
							}
						});
						this.$tim.sendMessage(message).then(imResponse => {
							console.log('发送自定义'+custom_desc+'消息成功:', imResponse);
							this.JGpush('[图片]');
						}).catch(imError => {
							console.warn('发送自定义'+custom_desc+'消息失败:', imError);
						});
					}, (err) => {
						console.log('err: ' + JSON.stringify(err));
					}, {
						region: 'SCN',
						domain: this.domain,
						key: key,
						uptoken: this.qiniuToken,
					}, (res) => {
						this.progress = res.progress;
					}, () => {
						// 取消上传
					}, () => {
						// `before` 上传前执行的操作
					}, () => {
						// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
					});
				}
				this.screenMsg({
					type: 'user',
					msg: {
						type: type,
						content: content,
						userinfo: {
							id: this.IDBEFORE + this.userInfo.id,
							name: this.userInfo.name,
							avatar: this.userInfo.avatar
						}
					},
				});
			},
			
			// 预览图片
			showPic: function (msg) {
				let url = msg.content.url.split('?');
				uni.previewImage({
					indicator: "none",
					current: url[0],
					urls: this.msgImgList
				});
			},
			
			// 播放语音
			playVoice: function (msg, index){
				this.playMsgid = 'msg' + index;
				this.AUDIO.src = msg.content.url;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			
			// 录音开始
			voiceBegin: function (e) {
				if (e.touches.length > 1) {
					return ;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({format:"mp3"});//录音开始,
			},
			
			//录音开始UI效果
			recordBegin: function (e) {
				this.recording = true;
				this.voiceTis='松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(()=>{
					this.recordLength++;
				}, 1000)
			},
			
			// 录音被打断
			voiceCancel: function () {
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true;//不发送录音
				this.RECORDER.stop();//录音结束
			},
			
			// 录音中(判断是否触发上滑取消发送)
			voiceIng: function (e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				}else{
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			
			// 结束录音
			voiceEnd: function (e) {
				if(!this.recording){
					return;
				}
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop();//录音结束
			},
			
			//录音结束(回调文件)
			recordEnd: function (e) {
				clearInterval(this.recordTimer);
				if(!this.willStop){
					console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength/60);
					let sec = this.recordLength%60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.sendMsg(msg, 'voice');
				}else{
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			
			// 切换语音/文字输入
			switchVoice: function () {
				this.isVoice = !this.isVoice;
				this.isMore = false;
			},
			
			discard: function () {
				return;
			},
			
			openGift: function () {
				
				this.$api.api.ajaxData({
					method: 'V1.Gift',
					uid: this.userInfo.id,
					token: this.userInfo.token
				}, res => {
					if (res.status) {
						this.giftData.rid = '0',
						this.giftData.list = res.data.list
						this.giftData.userInfo.rose = res.data.info.rose
						this.$refs['give-gift'].open();
						
						
					}
				})
			},
			
			addFriend: function (type) {
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.JoinGroupFriend',
					uid: this.userInfo.id,
					token: this.userInfo.token,
					touid: util.getUserID(this.toInfo.id, this.IDBEFORE),
					type: 'friends',
					ispay: '1'
				}, res => {
					uni.hideLoading();
					if (res.status) {
						let toast = '';
						if (type == 'application') {
							toast = '申请添加好友发送成功';
							let message = this.$tim.createCustomMessage({
								to: this.toInfo.id + '',
								conversationType: this.TIM.TYPES.CONV_C2C,
								payload: {
									data: 'addFriend',
									description: '申请添加好友',
									extension: ''
								}
							});
							this.$tim.sendMessage(message).then(imResponse => {
								console.log('发送加好友自定义消息成功:', imResponse);
							}).catch(imError => {
								console.warn('发送加好友自定义消息失败:', imError);
							});
							
						}
						if (type == 'agree') {
							toast = '已同意'
							this.isAddFriend = false;
							
						}
						uni.showToast({
							title: toast,
							position: 'bottom',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						})
					}
				})
			},
			getUserDetail: function () {
				uni.showLoading({
					title: ''
				});
				
				this.$api.api.ajaxData({
					method: 'V1.Detail',
					uid: this.userInfo.id,
					token: this.userInfo.token,
					touid: util.getUserID(this.toInfo.id, this.IDBEFORE),
					page: 1,
				}, res => {
					uni.hideLoading();
					if (res.status) {

						this.user.avatar = res.data.info.avatar;
						this.user.sex = res.data.info.sex;
						this.user.age = res.data.info.age;
						this.user.city = !!res.data.info.city?res.data.info.city:'';
					
						this.user.think = !!res.data.info.think ? res.data.info.think : '';
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			
		}
	}
</script>
<style lang="scss" scoped>
	@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');}
	@font-face {
		font-family: iconfont;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/font/iconfont.ttf') format('truetype');
	}
	.icon1 {
		font-family: "iconfont" !important;
		font-size: 60rpx;
		// color: #666;
		color: #f06c7a;
		&.gift:before {
			content: "\e65d";
		}
	}
	.icon {
		font-family: "HMfont-home" !important;
		font-size: 56rpx;
		font-style: normal;
		color: #333;
	    // color: #f06c7a;
		&.biaoqing:before {
			content: "\e797";
		}
		&.jianpan:before {
			content: "\e7b2";
		}
		&.yuyin:before {
			content: "\e805";
		}
		&.tupian:before {
			content: "\e639";
		}
		&.chehui:before {
			content: "\e904";
		}
		&.luyin:before {
			content: "\e905";
		}
		&.luyin2:before {
			content: "\e677";
		}
		&.other-voice:before {
			content: "\e667";
		}
		&.my-voice:before {
			content: "\e906";
		}
		&.hongbao:before {
			content: "\e626";
		}
		&.tupian2:before {
			content: "\e674";
			color: #f06c7a;
		}
		&.paizhao:before {
			content: "\e63e";
			color: #f06c7a;
		}
		// 新添加礼物
		// &.paizhao:before {
		// 	content: "\e65d";
		// }
		&.add:before {
			content: "\e655";
		}
		&.close:before {
			content: "\e607";
		}
		&.to:before {
			content: "\e675";
		}
	}
	page {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #f5f5f5;
	}
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		position: relative;
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: center;
	}
	.bg-blur{
		position: absolute;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: center;
		filter: blur(4px);
	}
	
	.addFriend {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: absolute;
		left: 0;
		top: 1rpx;
		z-index: 9;
		.tips {
			font-size: 24rpx;
			color: #333333;
		}
		.control-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		button {
			font-size: 20rpx;
			border-radius: 40rpx;
			margin: 0;
		}
	}
	.loading {
		display: flex;
		justify-content: center;
		@keyframes stretchdelay {
			0%, 40%, 100% {
				transform: scaleY(0.6);
			}
			20% {
				transform: scaleY(1.0);
			}
		}
		.spinner {
			margin: 20rpx 0;
			width: 60rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.rect {
				background-color: #f06c7a;
				height: 50rpx;
				width: 6rpx;
				border-radius: 6rpx;
				animation: stretchdelay 1.2s infinite ease-in-out;
				&.rect2 {
				  animation-delay: -1.1s;
				}
				&.rect3 {
				  animation-delay: -1.0s;
				}
				&.rect4 {
				  animation-delay: -0.9s;
				}
				&.rect5 {
				  animation-delay: -0.8s;
				}
			}
		}
	}
	.user-wrap{
		position: fixed;
		width: 700rpx;
		height: 220rpx;
		border-radius: 20rpx;
		background-color: #fff;
		top: 20rpx;
		left: 25rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		z-index: 9999;
		.user-info {
			// display: flex;
			// justify-content: flex-start;
			// align-items: center;
			
			.avatar-icon{
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				float: left;
			}
			.sex-wrap {
				float: left;
				margin-left: 30rpx;
				// display: flex;
				// justify-content: center;
				align-items: center;
				line-height: 28rpx;
				padding: 5rpx 10rpx;
				border-radius: 28rpx;
				display: inline-block;
				&.sex1 {
					background: #83d7ff;
				}
				&.sex2 {
					background: #fe9ab7;
				}
				.sex-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.age {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
			.city-wrap {
				float: left;
				margin-left: 20rpx;
				display: flex;
				justify-content: top;
				align-items: center;
				line-height: 28rpx;
				padding: 5rpx 10rpx;
				border-radius: 28rpx;
				background: #4cbcfc;
				margin-left: 10rpx;
				display: inline-block;
				box-sizing: border-box;
				.city-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.city {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
			.think-wap{
				float: left;
				width: 500rpx;
				height: 50rpx;
				line-height: 50rpx;
				
				overflow: hidden;
				font-size: 28rpx;
				color: #666;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 20rpx 30rpx;
			}
			.see-wap{
				
				display: block;
				border-radius: 25rpx;
				margin-right: 30rpx;
				float: right;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				border:1rpx solid #ededed;
				color: #666;
				text-align: center;
			}		
		}
	}
	
	.message-wrap {
		width: 100%;
		flex: 1;
		
		padding-bottom: 80rpx;
		// height: 80%;
		.msg-list {
			width: 100%;
			// height: 80%;
			padding: 20rpx;
			box-sizing: border-box;
			.row {
				& + .row {
					margin-top: 20rpx;
				}
				.system {
					display: flex;
					justify-content: center;
					.system-content {
						padding: 0 30rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #c9c9c9;
						color: #fff;
						font-size: 24rpx;
						border-radius: 40rpx;
					}
				}
				.my .left, .other .right{
					width: 100%;
					display: flex;
					.bubble {
						max-width: 70%;
						min-height: 50rpx;
						border-radius: 10rpx;
						padding: 10rpx 20rpx;
						display: flex;
						align-items: center;
						font-size: 30rpx;
						word-break: break-word;
						&.img {
							background-color: transparent;
							padding: 0;
							overflow: hidden;
							image {
								width: 350rpx;
								height: 350rpx;
							}
						}
						&.voice {
							.icon {
								font-size: 40rpx;
								display: flex;
								align-items: center;
								&:after {
									content: " ";
									width: 53rpx;
									height: 53rpx;
									border-radius: 100%;
									position: absolute;
									box-sizing: border-box;
								}
							}
							.length{
								font-size: 24rpx;
							}
						}
						&.gift {
						
							background: none !important;
							color:#666 !important ;
							.imgbg{
								width: 225rpx;
								height: 210rpx;
								
								background-size: cover;
								padding-top: 62rpx;
								box-sizing: border-box;
								display:block;
								image {
									background-size:contain|cover;
									width:90rpx;
									height: 90rpx;
									
								}
							}
							.giftinfo{
								width: 130rpx;
								padding-top: 30rpx;
								height: 110rpx;
								
								.giftmsg{
									// width: 100%;
									font-size: 30rpx;
									line-height: 46rpx;
									color: #666;
									display: block;
									float: left;
								}
								.giftname{
									// width: 100%;
									font-size: 28rpx;
									color: #666;
									float: left;
									display: block;
									line-height: 32rpx;
								}
							}
							
							
						}
					}
				}
				.my .right, .other .left{
					flex-shrink: 0;
					width: 80rpx;
					height: 80rpx;
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}
				}
				.my {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					.left {
						min-height: 80rpx;
						align-items: center;
						justify-content: flex-end;
						.bubble {
							background: linear-gradient(to bottom right, #51C6D4, #5DDAB2);
							
							color: #fff;
							&.voice {
								.icon {
									color: #fff;
								}
								.length {
									margin-right: 20rpx;
								}
							}
							&.play {
								@keyframes voicePlay {
									0% {
										transform: translateX(80%);
									}
									100% {
										transform: translateX(0%);
									}
								}
								.icon {
									position: relative;
								}
								.icon:after {
									border-left: solid 10rpx rgba(240,108,122,0.5);
									animation: voicePlay 1s linear infinite;
									position: absolute;
									left: 0;
									top: 0;
								}
							}
							
						}
					}
					.right {
						margin-left: 15rpx;
					}
				}
				.other {
					display: flex;
					width: 100%;
					.left {
						margin-right: 15rpx;
					}
					.right {
						flex-wrap: wrap;
						.username {
							display: flex;
							width: 100%;
							height: 45rpx;
							font-size: 24rpx;
							color: #999;
							.name {
								margin-right: 50rpx;
							}
						}
						.bubble {
							background-color: #fff;
							color: #333;
							&.voice {
								.icon {
									color: #333;
								}
								.length {
									margin-left: 20rpx;
								}
							}
							&.play {
								@keyframes otherPlay {
									0% {
										transform: translateX(-80%);
									}
									100% {
										transform: translateX(0%);
									}
								}
								.icon:after {
									border-right: solid 10rpx rgba(255,255,255,.8);
									animation: otherPlay 1s linear infinite;
								}
							}
						}
					}
				}
			}
		}
	}
	.hidden {
		display: none !important;
	}
	.popup-layer {
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		padding: 15rpx 15rpx;
		box-sizing: border-box;
		background-color: #fff;
		
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		.more-layer {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			padding-left: 30rpx;
			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 180rpx;
				height: 60rpx;
				.menu-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 160rpx;
					height: 60rpx;
					border-radius: 20rpx;
					background-color: #fff;
					.icon {
						font-size: 60rpx;
						color: #666;
					}
				}
			}
		}
	}
	.input-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 10rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 9;
		.voice, .more, .send {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
		}
		.send {
			width: 130rpx !important;
			&.disab{
				pointer-events: none;
				button {
					background-color: #bfbfbf !important;
				}
			}
			button {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 20rpx;
				font-size: 26rpx;
				padding: 0 10rpx !important;
				background: linear-gradient(to bottom right, #51C6D4, #5DDAB2) !important;
			}
		}
		.textbox {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			height: 100rpx;
			.voice-mode {
				width: calc(100% - 2rpx);
				height: 68rpx;
				border-radius: 70rpx;
				border: 1rpx solid #efefef;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				background-color: #f5f5f5;
				color: #555;
				&.recording {
					background-color: #e5e5e5;
				}
			}
			.text-mode {
				display: flex;
				width: calc(100% - 2rpx);
				height: 68rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background-color: #f5f5f5;
				border: 1rpx solid #efefef;
				border-radius: 70rpx;
				.input {
					width: 100%;
					height: 64rpx;
					line-height: 64rpx;
				}
				.input-placeholder {color: #999;font-size:24rpx;text-align: center;}
			}
		}
	}
	.record {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 55%;
		left: 50%;
		background-color: rgba(0,0,0,.6);
		border-radius: 20rpx;
		margin-left: -150rpx;
		.ing {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// 模拟录音音效动画
			@keyframes volatility {
				0% {background-position: 0% 130%;}
				20% {background-position: 0% 150%;}
				30% {background-position: 0% 155%;}
				40% {background-position: 0% 150%;}
				50% {background-position: 0% 145%;}
				70% {background-position: 0% 150%;}
				80% {background-position: 0% 155%;}
				90% {background-position: 0% 140%;}
				100% {background-position: 0% 135%;}
			}
			.icon {
				background-image: linear-gradient(to bottom,#f09b37,#fff 50%); 
				background-size: 100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip: text; 
				-webkit-text-fill-color: transparent; 
				font-size: 150rpx;
				color: #f09b37;
			}
		}
		.cancel {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon {
				color: #fff;
				font-size: 150rpx;
			}
		}
		.tis {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			color: #fff;
			&.change {
				color: #f09b37;
			}
		}
	}
	
	// 送礼物模块
	.sendgif{
	
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		bottom: 120rpx;
		background-color: rgba(0,0,0,.6);
		border-radius: 50rpx;
		right: 30rpx;
		
		image{
			width: 60rpx;
			height: 60rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}
	}
	
	
</style>
